<!-- 我的主页 -->
<template>
  <!-- emm -->
  
  <div class="box">
    <!-- 头部 -->
    <div class="top">
      <div class="top_head" :class="{ 'fixed': isHeadFixed }">
        <div class="gd">
          <svgIcon icon-name="icon-gengduo" color="#fff" font-size="40px"></svgIcon>
        </div>
        <div class="szbj">
          <svgIcon icon-name="icon-tupian" color="#fff" font-size="26px"></svgIcon>
          设置背景
        </div>
        <div class="sys">
          <svgIcon icon-name="icon-saoyisao" color="#fff" font-size="50px"></svgIcon>
        </div>
        <div class="fx">
          <svgIcon icon-name="icon-fenxiang3" color="#fff" font-size="50px"></svgIcon>
        </div>
      </div>
      <div class="top_user">
        <div class="pic">
          <img v-if="userInfo.avatar_url" :src="userInfo.avatar_url" alt="用户头像">
          <img v-else :src="defaultAvatar" alt="默认头像">
        </div>
        <div class="user">
          <div class="user_name">
            {{ userInfo.nickname || '未设置昵称' }}
          </div>
          <div class="user_id">
            小红书号：{{ userInfo.user_id || '未设置' }}
            <svgIcon iconName="icon-erweima" color="#b3b5be" font-size="26px"></svgIcon>
          </div>
        </div>
      </div>
      <div class="top_jj">
        {{ userInfo.bio || '暂时没有简介' }}
      </div>
      <div class="top_jj_two">
        <div class="top_year" v-show="user_jj.gender !== '' && user_jj.gender !== '暂时未设置' && user_jj.gender !== '选择性别'">
          <svgIcon :iconName="user_jj.gender==='男'? 'icon-nan' : 'icon-xingbienv'" color="#b3b5be" font-size="26px"></svgIcon>
          {{ user_jj.gender }}
        </div>
        <div class="top_year">
          {{ user_jj.age }}岁
        </div>
        <div class="top_year" v-show="user_jj.area !== '' && user_jj.area !== '未设置地区' && user_jj.area !== '选择地区'">
          {{ user_jj.area}}
        </div>
        <div class="top_year" v-show="user_jj.job !== '' && user_jj.job !== '未设置职业' && user_jj.job !== '选择职业'">
          {{ user_jj.job }}
        </div>
        <div class="top_year" v-show="user_jj.school !== '' && user_jj.school !== '未设置学校' && user_jj.school !== '暂时未设置'">
          {{ user_jj.school }}
        </div>
      </div>
      <div class="top_data">
        <div class="gz" @click="router.push({ path: '/userlist', query: { tab: 'following' } })">
          {{ userInfo.following_count }}
          <p>关注</p>
        </div>
        <div class="fs" @click="router.push({ path: '/userlist', query: { tab: 'followers' } })">
          {{ userInfo.followers_count }}
          <p>粉丝</p>
        </div>
        <div class="zan">
          0
          <p>点赞与收藏</p>
        </div>
        <div class="up_user" @click="router.push('/upme')">
          编辑资料
        </div>
        <div class="sz" @click="router.push('/me_setting')">
          <svgIcon iconName="icon-shezhi" font-size="40px"></svgIcon>
        </div>
      </div>
      <div class="top_qt">
        <div class="qt_item">
          <p class="qt_title">友好市集</p>
          <p class="qt_text">好逛好玩又好买</p>
        </div>
        <div class="qt_item">
          <p class="qt_title">订单</p>
          <p class="qt_text">查看我的订单</p>
        </div><div class="qt_item">
          <p class="qt_title">购物车</p>
          <p class="qt_text">查看推荐好物</p>
        </div><div class="qt_item">
          <p class="qt_title">创作灵感</p>
          <p class="qt_text">学创作找灵感</p>
        </div><div class="qt_item">
          <p class="qt_title">浏览记录</p>
          <p class="qt_text">看过的笔记</p>
        </div>
      </div>
    </div>
    <div class="top_two" :class="{ 'fixed': isTwoFixed }">
      <div class="biji" :class="{ 'two_active': currentMode === 'notes' }" @click="handleBijiClick">
        笔记  {{ userNotes.length }}
      </div>
      <div class="shoucan" :class="{ 'two_active': currentMode === 'favorites' }" @click="handleShoucanClick">
        收藏
      </div>
      <div class="zanguo" :class="{ 'two_active': currentMode === 'likes' }" @click="handleZanguoClick">
        赞过
      </div>
      <span class="suosuo">
        <svgIcon iconName="icon-sousuo" font-size="36px"></svgIcon>
      </span>
    </div>
    <div class="content" :class="{ 'fixed': isContFixed }">
      <div class="item" 
        v-for="note in currentMode === 'notes' ? userNotes : (currentMode === 'favorites' ? favoriteNotes : likedNotes)" 
        :key="note.note_id"
        @click="handleNoteClick(note)"
      >
        <div class="item_banner">
          <img v-if="note.media_type === 'image'" :src="note.media_url" alt="">
          <VideoPoster 
            v-else-if="note.media_type === 'video'" 
            :videoSrc="note.media_url"
            width="100%"
            height="100%"
            :canvasWidth="320"
            :canvasHeight="180"
            @click="handleNoteClick(note)"
          />
        </div>
        <div v-if="note.title" class="item_title">{{ note.title }}</div>
        <div class="item_user">
          <div class="item_pic">
            <img :src="currentMode === 'notes' ? (userInfo.avatar_url || defaultAvatar) : (note.author_info?.avatar_url || defaultAvatar)" alt="">
            <span class="item_user_name">
              {{ currentMode === 'notes' ? (userInfo.nickname || '未设置昵称') : (note.author_info?.nickname || '未设置昵称') }}
            </span>
          </div>
          <div class="item_zan">
            {{ formatTime(note.updated_at) }}
          </div>
        </div>
      </div>
    </div>
    <NavFooter />
  </div>
  
</template>
<script setup>
import NavFooter from '@/components/NavFooter.vue'
import svgIcon from '@/components/svgIcon.vue';
import router from '@/router';
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
import axios from 'axios';
import defaultAvatar from '@/assets/czq/pic.png';
import { showToast } from 'vant';
import VideoPoster from '@/components/VideoPoster.vue';

const isHeadFixed = ref(false);
const isTwoFixed = ref(false);
const isContFixed = ref(false);

// 用户信息
const userInfo = ref({
  nickname: '',
  user_id: '',
  avatar_url: '',
  bio: '',
  works_list: [],
  //关注列表
  following_list: [],
  //粉丝列表
  followers_list: [],
  //关注数
  following_count: 0,
  //粉丝数
  followers_count: 0,
});

//用户简介
const user_jj = ref({
  age: '',
  gender: '',
  area: '',
  job: '',
  school: '',
})

// 用户笔记列表
const userNotes = ref([]);

// 收藏笔记列表
const favoriteNotes = ref([]);

// 点赞笔记列表
const likedNotes = ref([]);

// 当前显示模式：'notes'、'favorites' 或 'likes'
const currentMode = ref('notes');

// 计算年龄的函数
const calculateAge = (birthday) => {
  if (!birthday) return '';
  const [year, month, day] = birthday.split('-').map(Number);
  const today = new Date();
  const birthDate = new Date(year, month - 1, day);
  
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  
  return age;
};

// 获取笔记媒体数据
const fetchNoteMedia = async (noteId) => {
  try {
    const response = await axios.get(`http://1.14.98.17:8765/api/notes/${noteId}/media`);
    if (response.data.success) {
      const mediaData = response.data.data[0];
      return {
        media_url: mediaData?.media_url || '',
        media_type: mediaData?.media_type || 'image' // 默认为image类型
      };
    }
    return {
      media_url: '',
      media_type: 'image'
    };
  } catch (error) {
    console.error(`获取笔记 ${noteId} 的媒体数据出错:`, error);
    return {
      media_url: '',
      media_type: 'image'
    };
  }
};

// 获取所有用户的笔记
const fetchUserNotes = async (userId) => {
  try {
    const response = await axios.get('http://1.14.98.17:8765/api/notes');
    if (response.data.success) {
      // 筛选出指定用户的笔记
      const notes = response.data.data.filter(note => note.user_id === userId);
      console.log('用户笔记数据：', notes);
      
      // 获取每个笔记的媒体数据  获取对应笔记的第一个媒体数据也就是封面 组成新的笔记数据
      const notesWithMedia = await Promise.all(
        notes.map(async (note) => {
          const mediaData = await fetchNoteMedia(note.note_id);
          return {
            ...note,
            media_url: mediaData.media_url,
            media_type: mediaData.media_type
          };
        })
      );
      
      userNotes.value = notesWithMedia;
      console.log('带媒体数据的笔记：', userNotes.value);
    } else {
      console.error('获取笔记数据失败:', response.data);
    }
  } catch (error) {
    console.error('获取笔记数据出错:', error);
  }
};

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const userId = localStorage.getItem('user_id');
    if (!userId) {
      showToast('未获取到用户ID');
      return;
    }

    //获取用户基本信息
    const response = await axios.get(`http://1.14.98.17:8765/api/users/${userId}`);
    if (response.data.success === true) {
      const data = response.data.data;
      console.log('API返回的用户数据:', data);
      
      // 获取用户详情
      const profileResponse = await axios.get(`http://1.14.98.17:8765/api/profile/${userId}`);
      if (profileResponse.data.success === true) {
        const bio_jj = profileResponse.data.data.bio || '';
        const bioArray = bio_jj.split('。');

        // 获取关注列表
        const followingResponse = await axios.get(`http://1.14.98.17:8765/api/profile/${userId}/following`);
        const followingCount = followingResponse.data.success ? followingResponse.data.data.following.length : 0;

        // 获取粉丝列表
        const followersResponse = await axios.get(`http://1.14.98.17:8765/api/profile/${userId}/followers`);
        const followersCount = followersResponse.data.success ? followersResponse.data.data.followers.length : 0;

        //设置用户全部信息 
        userInfo.value = {
          nickname: data.nickname || '未设置昵称',
          user_id: data.user_id || userId, // 使用API返回的user_id或本地存储的userId
          avatar_url: data.avatar_url || defaultAvatar,
          works_list: profileResponse.data.data.works_list || [],
          following_list: profileResponse.data.data.following_list || [],
          followers_list: profileResponse.data.data.followers_list || [],
          following_count: followingCount,
          followers_count: followersCount,
          bio: bioArray[0] || '未设置简介'
        }
        
        console.log('设置的用户信息:', userInfo.value);

        user_jj.value = {
          school: bioArray[5] || '',
          gender: bioArray[1] || '',
          age: calculateAge(bioArray[2]) || 20,
          area: bioArray[3] ? bioArray[3] : '',
          job: bioArray[4] || ''
        }
      }

      // 获取用户笔记
      fetchUserNotes(userId);
    } else {
      showToast(response.data.message || '获取用户简介信息失败');
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    showToast('获取用户信息失败');
  }
};

// 获取收藏笔记
const fetchFavoriteNotes = async () => {
  try {
    const currentUserId = localStorage.getItem('user_id');
    if (!currentUserId) {
      showToast('请先登录');
      return;
    }

    // 获取所有笔记
    const response = await axios.get('http://1.14.98.17:8765/api/notes');
    if (response.data.success) {
      const allNotes = response.data.data;
      
      // 获取每个笔记的收藏用户列表
      const favoriteNotesData = [];
      
      for (const note of allNotes) {
        try {
          const favoritesResponse = await axios.get(`http://1.14.98.17:8765/api/notes/${note.note_id}/favorites`);
          if (favoritesResponse.data.success) {
            const favorites = favoritesResponse.data.data;
            // 检查当前用户是否收藏了这个笔记
            const isFavorited = favorites.some(fav => fav.user_id === currentUserId);
            
            if (isFavorited) {
              // 获取笔记详情
              const noteDetailResponse = await axios.get(`http://1.14.98.17:8765/api/notes/${note.note_id}`);
              if (noteDetailResponse.data.success) {
                const noteDetail = noteDetailResponse.data.data;
                
                // 获取笔记作者信息
                const userResponse = await axios.get(`http://1.14.98.17:8765/api/users/${note.user_id}`);
                const userInfo = userResponse.data.success ? userResponse.data.data : {};
                
                // 获取笔记媒体数据
                const mediaData = await fetchNoteMedia(note.note_id);
                
                favoriteNotesData.push({
                  ...noteDetail,
                  ...mediaData,
                  author_info: {
                    nickname: userInfo.nickname || '未设置昵称',
                    avatar_url: userInfo.avatar_url || defaultAvatar,
                    user_id: userInfo.user_id || note.user_id
                  }
                });
              }
            }
          }
        } catch (error) {
          console.error(`获取笔记 ${note.note_id} 的收藏数据出错:`, error);
        }
      }
      
      favoriteNotes.value = favoriteNotesData;
      console.log('收藏的笔记：', favoriteNotes.value);
    }
  } catch (error) {
    console.error('获取收藏笔记出错:', error);
    showToast('获取收藏笔记失败');
  }
};

// 获取点赞笔记
const fetchLikedNotes = async () => {
  try {
    const currentUserId = localStorage.getItem('user_id');
    if (!currentUserId) {
      showToast('请先登录');
      return;
    }

    // 获取所有笔记
    const response = await axios.get('http://1.14.98.17:8765/api/notes');
    if (response.data.success) {
      const allNotes = response.data.data;
      
      // 获取每个笔记的点赞用户列表
      const likedNotesData = [];
      
      for (const note of allNotes) {
        try {
          const likesResponse = await axios.get(`http://1.14.98.17:8765/api/notes/${note.note_id}/likes`);
          if (likesResponse.data.success) {
            const likes = likesResponse.data.data;
            // 检查当前用户是否点赞了这个笔记
            const isLiked = likes.some(like => like.user_id === currentUserId);
            
            if (isLiked) {
              // 获取笔记详情
              const noteDetailResponse = await axios.get(`http://1.14.98.17:8765/api/notes/${note.note_id}`);
              if (noteDetailResponse.data.success) {
                const noteDetail = noteDetailResponse.data.data;
                
                // 获取笔记作者信息
                const userResponse = await axios.get(`http://1.14.98.17:8765/api/users/${note.user_id}`);
                const userInfo = userResponse.data.success ? userResponse.data.data : {};
                
                // 获取笔记媒体数据
                const mediaData = await fetchNoteMedia(note.note_id);
                
                likedNotesData.push({
                  ...noteDetail,
                  ...mediaData,
                  author_info: {
                    nickname: userInfo.nickname || '未设置昵称',
                    avatar_url: userInfo.avatar_url || defaultAvatar,
                    user_id: userInfo.user_id || note.user_id
                  }
                });
              }
            }
          }
        } catch (error) {
          console.error(`获取笔记 ${note.note_id} 的点赞数据出错:`, error);
        }
      }
      
      likedNotes.value = likedNotesData;
      console.log('点赞的笔记：', likedNotes.value);
    }
  } catch (error) {
    console.error('获取点赞笔记出错:', error);
    showToast('获取点赞笔记失败');
  }
};

// 添加节流函数
const throttle = (fn, delay) => {
  let timer = null;
  return function() {
    if (timer) return;
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
};


onMounted(() => {
  fetchUserInfo(); // 获取用户信息
  
  const handleScroll = throttle(() => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 头部固定
    if (scrollTop > 1) {
      isHeadFixed.value = true;
    } else {
      isHeadFixed.value = false;
    }
    
    // top_two固定
    if (scrollTop > 500) {
      isTwoFixed.value = true;
      isContFixed.value = true;
    } else {
      isTwoFixed.value = false;
      isContFixed.value = false;
    }
  }, 1);

  window.addEventListener('scroll', handleScroll);
  
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });

});

// 添加处理surf值的函数
const formatSurf = (surf) => {
  if (surf >= 10000) {
    return Math.floor(surf / 10000) + 'w+';
  }
  return surf;
};

// 添加时间计算器函数
const formatTime = (timeStr) => {
    if (!timeStr) return '';
    
    // 提取时间部分（去掉地点）
    const time = timeStr.split(' ')[0];
    
    const now = new Date();
    const date = new Date(time);
    
    // 检查时间是否有效
    if (isNaN(date.getTime())) {
        console.error('Invalid time string:', timeStr);
        return '';
    }
    
    const diff = now - date; // 时间差（毫秒）
    
    // 十分钟内
    if (diff < 10 * 60 * 1000) {
        return '刚刚';
    }
    
    // 24小时内
    if (diff < 24 * 60 * 60 * 1000) {
        const hours = Math.floor(diff / (60 * 60 * 1000));
        const minutes = Math.floor(diff / (60 * 1000));
        
        if (hours === 0) {
            return `${minutes}分钟前`;
        } else {
            return `${hours}小时前`;
        }
    }
    
    // 本年内
    if (date.getFullYear() === now.getFullYear()) {
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${month}-${day}`;
    }
    
    // 超过本年
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 处理笔记点击事件
const handleNoteClick = (note) => {
  console.log('当前模式:', currentMode.value);
  console.log('用户信息:', userInfo.value);
  console.log('笔记信息:', note);
  
  let targetUserId;
  
  if (currentMode.value === 'notes') {
    // 在笔记模式下，使用当前用户的ID
    targetUserId = userInfo.value.user_id || localStorage.getItem('user_id');
    console.log('笔记模式 - 目标用户ID:', targetUserId);
  } else {
    // 在收藏或点赞模式下，使用笔记作者的ID
    targetUserId = note.author_info?.user_id || note.user_id;
    console.log('收藏/点赞模式 - 目标用户ID:', targetUserId);
  }
  
  if (!targetUserId) {
    console.error('无法获取用户ID');
    showToast('无法获取用户信息');
    return;
  }
  
  router.push({
    path: '/mecont',
    query: {
      userId: targetUserId,
      noteId: note.note_id
    }
  });
};

// 添加收藏点击事件
const handleShoucanClick = async () => {
  currentMode.value = 'favorites';
  await fetchFavoriteNotes();
};

// 添加笔记标签点击事件
const handleBijiClick = () => {
  currentMode.value = 'notes';
};

// 添加赞过点击事件
const handleZanguoClick = async () => {
  currentMode.value = 'likes';
  await fetchLikedNotes();
};
</script>

<style lang="less" scoped>
  .box {
    width: 750px;
    height: 100vh;
    background-color: #5a555c;
    position: relative;
    .top {
      width: 100%;
      // height: 700px;
      color: #fff;
      font-size: 32px;
      background: linear-gradient(to bottom, #30344d, #5a555c);
      z-index: 1000;
      .top_head {
        width: 100%;
        height: 100px;
        display: flex;
        padding: 0 35px;
        align-items: center;
        transition: all 0.3s ease;
        &.fixed {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 100;
          background: #30344d;
          height: 100px;
          display: flex;
          padding: 0 35px;
          align-items: center;
        }
        .szbj {
          margin-left: 300px;
          width: 180px;
          height: 50px;
          border-radius: 20px;
          line-height: 50px;
          text-align: center;
          font-size: 22px;
          background-color: #5f677c;
        }
        .sys,.fx {
          margin-left: 35px;
        }
      }
      .top_user {
        padding: 0 35px;
        height: 150px;
        display: flex;
        .pic {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
        .user {
         margin-left: 35px;
         height: 100%;
         .user_name {
          margin-top: 30px;
          font-size: 36px;
          font-weight: 700;
         }
         .user_id {
          margin-top: 10px;
          font-size: 22px;
          color: #b3b5be;
         } 
        }
      }
      .top_jj {
        margin-left: 35px;
        margin-top: 35px;
      }
      .top_jj_two {
        display: flex;
        .top_year{
          margin-left: 35px;
          margin-top: 35px;
          padding: 8px 15px;
          font-size: 22px;
          border-radius: 20px;
          background-color: #5f677c;
          text-align: center;
        }
      }
      .top_data {
        margin-top: 10px;
        padding: 0 35px;
        height: 130px;
        display: flex;
        align-items: center;
        div {
          text-align: center;
          margin-right: 35px;
          p {
            font-size: 26px;
          }
        }
        .up_user {
          margin-left: 75px;
          width: 150px;
          height: 55px;
          line-height: 55px;
          border-radius: 30px;
          background-color: #6b666d;
          border: 1px solid #fff;
          font-size: 32px;
        }
        .sz {
          width: 80px;
          height: 55px;
          border-radius: 30px;
          background-color: #6b666d;
          border: 1px solid #fff;
          padding-top: 5px;
          margin-right: 0;
        }
      }
      .top_qt {
        margin-top: 20px;
        height: 130px;
        margin-left: 35px;
        width: 715px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        display: flex;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
          display: none;
        }
        .qt_item {
          flex-shrink: 0;
          width: 230px;
          height: 100px;
          border-radius: 30px;
          background-color: #68636a;
          margin-right: 20px;
          padding-left: 25px;
          .qt_title {
            margin-top: 10px;
            color: #fff;
            font-size: 26px;
          }
          .qt_text {
            margin-top: 5px;
            color: #b3b5be;
            font-size: 22px;
          }
        }
      }
    }
    .top_two {
      width: 100%;
      border-radius: 20px 20px 0 0;
      background-color: #fff;
      height: 80px;
      padding: 0 35px;
      display: flex;
      align-items: center;
      font-size: 32px;
      &.fixed {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        z-index: 101;
        background: #fff;
        border-radius:0;
      }
      div {
        // width: 0px;
        height: 50px;
        text-align: center;
        color: #87888e;
        margin-right: 60px;
      }
      .two_active {
        color: #000 !important;
        border-bottom: 5px solid red;
      }
    }
    .content {
      width: 750px;
      column-count: 2; /* 设置列数 */
      column-gap: 10px; /* 列间距 */
      background-color: #fafafa;
      min-height: 1600px;
      padding: 0 10px;
      padding-bottom: 100px;
      &.fixed {
        margin-top: 20px;
        width: 100%;
        z-index: 999;
      }
      .item {
        width: 360px;
        margin-bottom: 20px; /* 上下间距 */
        break-inside: avoid; /* 防止item被分割到不同列 */
        background-color: #fff;
        display: flex;
        flex-direction: column;
        height: fit-content;
        border-radius: 8px;
        overflow: hidden;

        .item_banner {
          position: relative;
          width: 100%;
          img {
            width: 100%;
            height: auto; /* 让图片高度自适应 */
            object-fit: cover; /* 保持图片比例 */
          }
          video {
            width: 100%;
            height: auto; /* 让图片高度自适应 */
            object-fit: cover; /* 保持图片比例 */
          }
          span {
            display: block;
            position: absolute;
            left: 15px;
            bottom: 15px;
            padding: 0 10px;
            height: 40px;
            border-radius: 20px;
            background-color: rgba(0, 0, 0, .4);
            text-align: center;
            line-height: 40px;
            font-size: 22px;
            color: #fff;
          }
        }
        .item_title {
          width: 100%;
          height: 60px;
          line-height: 60px;
          color: #000;
          font-size: 28px;
          padding-left: 20px;
          overflow: hidden;
        }
        .item_user {
          display: flex;
          width: 100%;
          height: 60px;
          line-height: 60px;
          color: #87888e;
          padding-left: 20px;
          justify-content: space-between;
          .item_pic {
            height: 30px;
            border-radius: 50%;
            img {
              border-radius: 50%;
              width: 40px;
              height: 40px;
              margin-bottom: 5px;
            }
            .item_user_name {
            margin-left: 20px;
            font-size: 26px;
          }
          }

          .item_zan {
            font-size: 26px;
            color: #87888e;
          }
        }
      }
    }
  }

  video {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
</style>